<template>
  <div class="news">
    <teleport to="body">
      <!-- 好友消息右键弹框 -->
      <div @click.stop.prevent v-show="isShowNewsRightModel" id="rightMenu" class="showMenu" >
        <!-- <span>置顶</span> -->
        <span @click="deleteChat(1)">不显示聊天</span>
        <span @click="deleteChat(2)">删除聊天</span>
      </div>
      <!-- 好友列表右键弹框 -->
      <div v-show="isShowFriendRightModel" id="friendRightMenu" class="showMenu" >
        <span @click="rightGotoChat">发消息</span>
        <span @click="deleteFriend">删除好友</span>
      </div>
    </teleport>
    
    <el-container>
      <el-aside width="300px" class="side">
        <!-- 好友消息区域 -->
        <div v-if="clickIndex === 1" class="side-content">
          <div class="side-top">
            <el-input
              v-model="searchNew"
              class="searchNew-input"
              placeholder="搜索消息"
              :prefix-icon="Search"
            />
            <div class="add_image">
              <svg-icon @click="isShowGroup = true" icon-class="addFile" />
            </div>
          </div>
          <el-scrollbar height="100%">
            <div v-for="(item, index) in newsList"
              @click="startChat(item)"
              :style="{'background-color':(item.user_id==chatItem.user_id?'#F3F3F3':'#ffffff')}"
              class="new-item"
            >
              <div @contextmenu.prevent="openMenu($event, item)" class="outerLayer">
                <div class="left">
                  <img :src="item.avatar" />
                </div>
                <div class="right">
                  <div class="right-top">
                    <span>{{item.nickname}}</span>
                    <span v-if="item.msg_date" class="time">{{item.msg_date}}</span>
                  </div>
                  <div class="right-bottom">
                    <span v-if="item.chatType == 1 && item.msg_content">名字：</span>
                    <span v-if="item.msg_content">{{item.msg_content}}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <!-- 好友区域 -->
        <div v-if="clickIndex === 2" class="side-content">
          <div class="side-top">
            <el-input
              v-model="searchKeyWord"
              class="searchNew-input"
              clearable
              placeholder="搜索/添加好友"
              :prefix-icon="Search"
            />
            <Position v-if="isSearch == false" @click="searchFriendEvent" class="search-icon"/>
            <span v-else @click="cancelSearch" style="margin-right: 15px;font-size: 14px;cursor: pointer;">取消</span>
          </div>
          <el-scrollbar height="100%">
            <!-- 未搜索展示 -->
            <div v-if="!isSearch">
              <div @click="openNewFriend" class="friend-chat">
                <div class="title">新的朋友</div>
                <el-badge :hidden="newFriendNumber==0" :value="newFriendNumber" style="width: 95%;">
                  <div class="group-item">
                    <div class="outerLayer">
                      <div class="left add_new_frinend">
                        <svg t="1675170839790" class="icon" 
                          viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="2539" width="30" height="30"><path d="M572.282915 587.416406A293.701506 293.701506 0 0 1 364.586038 86.028148a293.709605 293.709605 0 0 1 415.373506 415.363381 291.777918 291.777918 0 0 1-207.676629 86.024877z m0-523.195671a229.494165 229.494165 0 0 0-162.269829 391.804491 229.502265 229.502265 0 0 0 324.539658-324.590279 227.975543 227.975543 0 0 0-162.269829-67.214212z" fill="#fa7942" p-id="2540"></path><path d="M139.617367 1024H75.399902a499.029333 499.029333 0 0 1 499.424174-499.424174v64.217464a434.811868 434.811868 0 0 0-435.206709 435.20671z" fill="#fa7942" p-id="2541"></path><path d="M540.158997 773.96394m10.124147 0l388.19017 0q10.124147 0 10.124147 10.124147l0 44.546247q0 10.124147-10.124147 10.124147l-388.19017 0q-10.124147 0-10.124147-10.124147l0-44.546247q0-10.124147 10.124147-10.124147Z" fill="#fa7942" p-id="2542"></path><path d="M711.986021 602.136916m10.124147 0l44.546247 0q10.124147 0 10.124147 10.124147l0 388.190171q0 10.124147-10.124147 10.124147l-44.546247 0q-10.124147 0-10.124147-10.124147l0-388.190171q0-10.124147 10.124147-10.124147Z" fill="#fa7942" p-id="2543"></path></svg>
                      </div>
                      <div class="right">
                        新的朋友
                      </div>
                    </div>
                  </div>
                </el-badge>
              </div>
              <div class="group-chat">
                <div class="title">群聊</div>
                <div v-for="item in groutList"
                  :style="{'background-color':(item.group_id==friendItem.group_id?'#F3F3F3':'#ffffff')}"
                  @click="lookDetail(item, 1)"
                  class="group-item"
                >
                  <div @contextmenu.prevent="openFriendMenu($event, item, 1)" class="outerLayer">
                    <div class="left">
                      <img :src="item.group_head"/>
                    </div>
                    <div class="right">
                      {{item.group_name}}
                    </div>
                  </div>
                </div>
              </div>
              <div class="friend-chat">
                <div class="title">好友</div>
                <div v-for="item in friendList"
                  :style="{'background-color':(item.user_friend_id==friendItem.user_friend_id?'#F3F3F3':'#ffffff')}"
                  @click="lookDetail(item, 0)"
                  class="friend-item"
                >
                  <div @contextmenu.prevent="openFriendMenu($event, item, 0)" class="outerLayer">
                    <div class="left">
                      <img :src="item.avatar"/>
                    </div>
                    <div class="right">
                      {{item.nickname}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 搜索展示 -->
            <div v-else>
              <div class="friend-chat">
                <div v-for="(item,index) in searchReasonData"
                  :style="{'background-color':(item.user_friend.user_friend_id==searchFriendId?'#F3F3F3':'#ffffff')}"
                  @click.stop="saveSearchFriendId(item)"
                  class="friend-item"
                >
                  <div>
                    <el-popover
                      v-model:visible="item.visible"
                      placement="right"
                      :width="280"
                      trigger="click"
                      style="position:relative;z-index: 1000;"
                    >
                      <template #reference>
                        <div slot="reference" style="display: flex;align-items: center;width: 100%;">
                          <div class="left">
                          <img :src="item.user_friend.avatar"/>
                        </div>
                        <div class="right">
                          {{item.user_friend.username}}
                        </div>
                        </div>
                      </template>
                      <template #default v-if="item.user_friend.user_friend_id==searchFriendId">
                        <div class="serachFriendArea">
                          <div class="top">
                            <img :src="item.user_friend.avatar" />
                            <div class="top-right">
                              <div class="name">
                                <span style="margin-right: 10px;">{{item.user_friend.nickname}}</span>
                                <svg-icon icon-class="male" />
                                <svg-icon icon-class="female" />
                              </div>
                              <div class="username">账号： {{item.user_friend.username}}</div>
                            </div>
                          </div>
                          <el-divider />
                          <el-button v-if="item.status == 1" @click="gotoChat(item)" type="primary" style="width: 100px;">发消息</el-button>
                          <el-button @click="addFriend(item, index)" v-if="item.status == 0" type="primary" style="width: 100px;">添加到通讯录</el-button>
                        </div>
                      </template>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <!-- 底部切换好友和消息区域 -->
        <div class="side-bottom">
          <div class="icon-area" @click="changeSelect(1)">
            <svg-icon v-if="clickIndex === 1" icon-class="news_act" class="bot_icon" />
            <svg-icon v-else icon-class="new" class="bot_icon" />
          </div>
          <div class="icon-area" @click="changeSelect(2)">
            <svg-icon v-if="clickIndex === 2" icon-class="friend_act" class="bot_icon" />
            <svg-icon v-else icon-class="friend" class="bot_icon" />
          </div>
        </div>
      </el-aside>
      <el-main style="padding: 0;overflow: hidden;">
        <div v-show="clickIndex == 1" style="height: 100%;display:flex;justify-content: center;align-items:center;">
          <chatDetail :chatItem="chatItem"/>
        </div>
        
        <div v-show="clickIndex == 2 && isShowNewFriend" style="height: 100%;">
          <newFriend @changeIsHaveNew="changeIsHaveNew" />
        </div>
        <div v-show="clickIndex == 2 && isShowNewFriend == false" style="height: 100%;">
          <friendDetail :friendItem="friendItem" :chatType="chatType" @changeChat="changeChat" />
        </div>
      </el-main>
    </el-container>
    <!-- 添加群聊弹出框 -->
    <el-dialog
      v-model="isShowGroup"
      align-center
      @close="closeAddGroupDialog"
      title="创建群聊"
      width="40%"
    >
      <div style="margin-top: -20px;">
        <el-form :model="addGroupForm" label-width="60px">
          <el-form-item label="头像">
            <div class="img_area">
              <div v-if="!url" class="add_icon" @click="chooseType">
                <Plus />
              </div>
              <img v-else :src="url" @click="chooseType"/>
              <input
                type="file"
                id="upload"
                ref="inputer"
                @change="uploadImg($event)"
                multiple
                accept="image/*"
                style="display:none"/>
            </div>
          </el-form-item>
          <el-form-item label="群名">
            <el-input v-model="addGroupForm.group_name" style="width: 160px;" />
          </el-form-item>
        </el-form>
        <el-transfer
          v-model="addGroupForm.user_list"
          filterable
          filter-placeholder="搜索"
          :titles="['所有好友', '选中好友']"
          :props="{
            key: 'user_friend_id',
            label: 'nickname',
          }"
          :data="friendList"
        >
          <template #right-footer>
            <div style="display: flex;justify-content: center; margin-top: 8px;">
              <el-button @click="addGroupEvent" type="primary" plain size="small">完成</el-button>
              <el-button @click="closeAddGroupDialog" type="danger" size="small" plain>取消</el-button>
            </div>
          </template>
        </el-transfer>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {Search, Plus, Position} from '@element-plus/icons-vue'
import {ref, reactive, onMounted,onUnmounted, watch, nextTick, getCurrentInstance} from 'vue'
import {useRouter} from 'vue-router'
import chatDetail from '@/views/news/chatDetail/index.vue'
import FriendDetail from '@/views/news/friendDetail/index.vue'
import newFriend from '@/views/news/newFriend/index.vue'
import {newsController, userController} from '@/api/index.js'
import {getCookies} from '../../utils/auth.js'
import {newsStore} from '../../store'

import { createSocket} from '@/utils/websocket.js'


// 路由实例对象
const router = useRouter()
// 获取pinia中的实例
const newsMainStore = newsStore()

const user_id=getCookies('user_id')
const username = getCookies('username')


// 顶部消息搜索输入值
const searchNew = ref('')

// 是否显示添加群聊弹框
const isShowGroup = ref(false)
// 添加群聊数据集
const addGroupForm = reactive({
  group_head: null,
  group_name: null,
  user_list: []
})
// 添加群头像暂时保存地址
const url = ref('')


// 是否搜索
const isSearch = ref(false)
// 搜索好友输入数据保存
const searchKeyWord = ref(null)
// 搜索好友结果保存
const searchReasonData = reactive([])
// 搜索好友点击时是否显示弹框
const isShowPopover = ref(false)

// 消息列表
const newsList = reactive([])
// 鼠标右键事件配置
const isShowNewsRightModel = ref(false)
// 保存消息右键点击的好友id
const rightNewUserId = ref(null)

// 是否展示新朋友列表
const isShowNewFriend = ref(false)
// 新朋友数量
const newFriendNumber = ref(0)

// 群组列表数据
const groutList = reactive([])
// 好友列表数据
const friendList = reactive([])
// 好友列表右键弹框
const isShowFriendRightModel = ref(false)
// 保存好友右键点击的好友对象
const rightUser = ref({})



// 点击底部图标时选中的索引
const clickIndex = ref(1)
// 保存点击对应聊天的用户信息
const chatItem = ref({})
// 保存点击对应好友对象信息
const friendItem = ref({})
// 点击的聊天类型
const chatType = ref(null)
// 保存点击搜索好友的id
const searchFriendId = ref(null)

onMounted(()=> {
  getFriendList()
  getGroupList()
  createSocket()
  getNewFrinedList()
  newsMainStore.$state.chatMenu.forEach(item => {
    newsList.push(item)
  })
//   window.onbeforeunload = function() {
//     createSocket().close()
// }
})




// 监听消息列表数据是否发生变化
watch(newsMainStore.$state.chatMenu, (newValue, oldValue) => {
  console.log('监听消息列表变化')
  console.log(newValue)
  newsList.length = 0
  newsMainStore.$state.chatMenu.forEach(item => {
    newsList.push(item)
  })
})
// 监听好友消息右键点击事件
watch(isShowNewsRightModel, (newValue, oldValue) => {
  if(newValue) {
    document.getElementById('app').addEventListener('mousedown', closeMenu)
  } else {
    document.getElementById('app').addEventListener('mousedown', closeMenu)
  }
}, {immediate: true})
// 监听好友列表右键点击事件
watch(isShowFriendRightModel, (newValue, oldValue) => {
  if(newValue) {
    document.getElementById('app').addEventListener('mousedown', closeMenu)
  } else {
    document.getElementById('app').addEventListener('mousedown', closeMenu)
  }
}, {immediate: true})


// 获取好友数据
const getFriendList = async () => {
  friendList.length = 0
  const res = await newsController.getFriendList()
  if(res.data.code === 200) {
    res.data.data.forEach(item => {
      friendList.push(item)
    });
  }
}
// 获取群组列表数据
const getGroupList = async () => {
  groutList.length = 0
  const res = await newsController.getGroupList()
  if(res.data.code === 200) {
    res.data.data.forEach(item => {
      groutList.push(item)
    });
  }
}
// 获取新朋友数据列表
const getNewFrinedList = async () => {
  const res = await newsController.getNewFriendList()
  // console.log('新朋友数据==')
  // console.log(res)
  if(res.data.code === 200) {
    newFriendNumber.value = res.data.data.length
  }
}
const changeIsHaveNew = (result) => {
  console.log('新好友状态')
  console.log(result)
  if(!result) {
    getNewFrinedList()
  }
}

// 搜索好友
const searchFriendEvent = async () => {
  isSearch.value = true
  if(searchKeyWord.value != null && searchKeyWord.value != '') {
    const res = await newsController.searchFriend({keyword: searchKeyWord.value})
    if(res.data.code === 200) {
      res.data.data.forEach(item => {
        if(item.user_friend.username != username) {
          item.visible = false
          searchReasonData.push(item)
        }
      })
    }
  }
}
// 保存点击搜索出来好友的id(如果用上面的lookDetail，会一直显示详情)
const saveSearchFriendId = (item) => {
  isShowPopover.value = true
  searchFriendId.value = item.user_friend.user_friend_id
}
// 取消搜索
const cancelSearch = () => {
  isSearch.value = false
  searchReasonData.length = 0
  searchKeyWord.value = null
}
// 添加好友申请
const addFriend = async (item, index) => {
  const res = await newsController.addFriendApply({user_friend_id: item.user_friend.user_friend_id})
  console.log('申请添加好友')
  console.log(res)
  if(res.data.code === 200) {
    item.visible = false
    ElMessage({
      message: res.data.data.message,
      type: 'success',
    })
  }
}

// 关闭添加群组弹框时触发
const closeAddGroupDialog = () => {
  isShowGroup.value = false
  addGroupForm.user_list.length = 0
}
// 点击添加群图标时触发input输入框
function chooseType() {
  document.getElementById("upload").click();
}
// 图片上传方法
async function uploadImg(event) {
  let file = event.target.files[0]
  let formDate = new FormData();
  formDate.append("file",file)
  const res = await userController.getHeadUrl(formDate)
  if(res.data.code == 200) {
    url.value = res.data.data.avatar
    addGroupForm.group_head = res.data.data.avatar
  }
}
// 添加群聊
const addGroupEvent = async () => {
  const res = await newsController.addGroup(addGroupForm)
  if(res.data.code === 200) {
    isShowGroup.value = false
    ElMessage({message: '创建成功', type: 'success'})
    addGroupForm.group_head = null
    addGroupForm.group_name = null,
    addGroupForm.user_list.length = 0
  }
  console.log('添加群聊')
  console.log(res)
}
// 删除聊天记录
const deleteChat = (type) => {
  isShowNewsRightModel.value = false
  if(type === 1) {
    newsMainStore.del_ChatMenu(rightNewUserId.value)
  } else {
    ElMessageBox.confirm(
      '删除聊天后，将同时删除聊天记录，包括聊天中的文件、图片等内容。',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      newsMainStore.del_ChatMenu(rightNewUserId.value)
    })
  }
}

// 修改点击时索引
const changeSelect = (value) => {
  clickIndex.value = value
  isShowNewFriend.value = false
}
// 点击新朋友时展示新朋友列表
const openNewFriend = () => {
  isShowNewFriend.value = true
  console.log(isShowNewFriend.value)
}

// 点击好友消息时打开聊天页面
const startChat = (item) => {
  chatItem.value = item
}
// 点击好友时查看好友详情
const lookDetail = (item, type) => {
  isShowNewFriend.value = false
  friendItem.value = item
  chatType.value = type
}

// 搜索结果中发送消息给已添加的好友
const gotoChat = (item) => {
  const friendData = {
    user_id: item.user_friend.user_friend_id,
    avatar: item.user_friend.avatar,
    nickname: item.user_friend.nickname,
    username: item.user_friend.username
  }
  changeChat(friendData)
}


// 接收子组件传过来的点击好友的id
const changeChat = (friendData) => {
  clickIndex.value = 1
  chatItem.value = friendData
  chatItem.value.user_id = friendData.user_id
  newsMainStore.save_ChatMenu(friendData)
  console.log('保存到vuex中的好友数据')
  console.log(newsMainStore.$state.chatMenu)
}

// 鼠标右键事件 ——— 打开好友消息菜单
const openMenu = (e, item) => {
  let box = document.getElementById('rightMenu')
  box.style.left = e.clientX + 'px'
  box.style.top = e.clientY + 'px'
  isShowNewsRightModel.value = true
  
  rightNewUserId.value = item.user_id
}
// 鼠标右键事件 ———— 打开好友列表弹框菜单(此处发消息有大问题)
const openFriendMenu = (e, item, type) => {
  rightUser.value = item
  rightUser.value.chatType = type
  let box = document.getElementById('friendRightMenu')
  box.style.left = e.clientX+ 'px'
  box.style.top = e.clientY + 'px'
  isShowFriendRightModel.value = true
}
// 点击鼠标右键弹框中的发消息进入聊天详情页
const rightGotoChat = () => {
  const friendData = {}
  if(rightUser.value.chatType === 1) {
    const {chatType, group_id, group_head, group_name} = rightUser.value
    let groupData = {
      user_id: group_id,
      group_id: group_id,
      avatar: group_head,
      nickname: group_name,
      chatType: chatType
    }
    friendData = groupData
  }
  if(rightUser.value.chatType === 0) {
    const {chatType, user_friend_id, avatar, nickname, username} = rightUser.value
    let userData = {
      user_id: user_friend_id, // 用户id
      avatar: avatar,  // 头像
      username: username, // 用户名
      nickname: nickname, // 昵称
      chatType: chatType,
    }
    friendData = userData
  }
  changeChat(friendData)
  chatItem.value.user_id = friendData.user_id
  isShowFriendRightModel.value = false
}

// 删除好友
const deleteFriend = () => {
  console.log(rightUser.value)
  if(rightUser.value.chatType === 0) {
    ElMessageBox.confirm(
      '确定删除好友吗？',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then( async () => {
      const res = await newsController.deleteFriend({user_friend_id: rightUser.value.user_friend_id})
      console.log('删除好友')
      console.log(res)
      if(res.data.code === 200) {
        getFriendList()
        getGroupList()
        isShowFriendRightModel.value = false
        ElMessage.success('删除成功')
      } else {
        ElMessage.error(res.data.message)
        isShowFriendRightModel.value = false
      }
    })
  }
}

// 鼠标右键事件 ———— 关闭菜单
const closeMenu = () => {
  isShowNewsRightModel.value = false
  isShowFriendRightModel.value = false
}
</script>

<style scoped lang="scss">
.news {
  height: 100%;
  position: relative;
  .el-container {
    height: 100%;
    .side {
      height: 100%;
      position: relative;
      border-right: 1px solid #E8E8E8;
      .side-top {
        width: 100%;
        height: 7%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #EBEBEB;
        .searchNew-input {
          width: 78%;
          margin-left: 10px;
        }
        .search-icon {
          width: 25px;
          height: 25px;
          opacity: .6;
          margin-right: 15px;
        }
        .add_image {
          padding: 4px;
          background-color: #EAEAEA;
          margin-right: 10px;
          border-radius: 5px;
        }
        .add_image:hover {
           background-color: #E2E2E2;
        }
      }
      .side-content {
        height: 87%;
        .new-item {
          display: flex;
          align-items: center;
          height: 80px;
          cursor: pointer;
          border-bottom: 1px solid #F3F3F3;
          .left {
            width: 50px;
            height: 50px;
            margin-left: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: 70%;
            margin-left: 15px;
            .right-top {
              display: flex;
              justify-content: space-between;
              .time {
                font-size: 12px;
                opacity: .4;
              }
            }
            .right-bottom {
              font-size: 13px;
              margin-top: 7px;
              opacity: .4;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              letter-spacing: 1px;
            }
          }
        }
        .group-chat {
          border-bottom: 1px solid #E9E8E7;
          .title {
            opacity: .4;
            margin: 4px;
            font-size: 13px;
          }
        }
        .friend-chat {
          .title {
            opacity: .4;
            margin: 4px;
            font-size: 13px;
          }
          .add_new_frinend{
            border: 1px solid #dbdbdbd9;
            border-radius: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .friend-item, .group-item {
          display: flex;
          align-items: center;
          height: 65px;
          cursor: pointer;
          .left {
            width: 40px;
            height: 40px;
            margin-left: 15px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: 70%;
            margin-left: 15px;
          }
        }
        .outerLayer {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          
        }
        .friend-item:hover {
          background-color: #F3F3F3;
        }
        .group-item:hover {
          background-color: #F3F3F3;
        }
      }
      .side-bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 6%;
        border-top: 1px solid #EBEBEB;
        .icon-area {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70px;
          flex-direction: column;
        }
        .bot_icon {
          width: 30px;
          height: 30px;
        }
      }
    }
    .el-main {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}
.img_area{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  height: 50px;
  width: 50px;
  border: 1px solid #FAFAFA;
  .add_icon {
    border: 1px solid #E4E4E4;
    width: 40px;
    height: 40px;
  }
  img{
    width: 100%;
    height: 100%;
  }
}
.serachFriendArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  .top {
    display: flex;
    height: 70px;
    img {
      width: 60px;
      height: 60px;
    }
    .top-right {
      margin: 5px 15px;
      .name {
        span {
          font-size: 20px;
          font-weight: bold;
        }
      }
      .username {
        margin-top: 5px;
        opacity: .7;
      }
    }
  }
}
::v-deep .el-divider--horizontal {
  margin-top: 10px;
}
.showMenu {
  position: absolute;
  z-index: 1000;
  border: 1px solid #E5E5E6;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  span {
    padding: 7px 20px;
    font-size: 12px;
    cursor: pointer;
  }
  span:hover {
    background-color: #C2C2C5;
  }
}

</style>
